<template>
    <div class="layout">
        <header class="layout-header">
            <el-row>
                <el-col :span="4">
                    <h3>知识探索 | 管理系统</h3>
                    <!-- <p>Content Manage System</p> -->
                </el-col>
                <el-col :span="4" :offset="16">
                    <div class="box">
                        <div class="link" v-if="!isLogin">
                            <router-link to="/login">
                                <el-icon>
                                    <Connection />
                                </el-icon>
                                <span>登录</span>
                            </router-link>
                        </div>
                        <div class="user" v-else>
                            <router-link to="/admin">
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span>{{ nickName }}</span>
                            </router-link> | <button @click="logoutFn">退出</button>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </header>
        <main>
            <el-row>
                <el-col :span="4">
                    <aside>
                        <!-- 侧栏菜单 -->
                        <my-menu></my-menu>
                    </aside>
                </el-col>
                <el-col :span="20">
                    <section>
                        <!-- 顶部导航栏 -->
                        <top-bar></top-bar>
                        
                        <!-- 内容区域 (二级路由出口) -->
                        <router-view></router-view>
                    </section>
                </el-col>
            </el-row>
        </main>
        <!-- <footer>尾部</footer> -->
        <!-- 对话框 -->
        <el-dialog v-model="dialogVisible" title="提示" width="500" draggable>
            <span>您要退出账号吗?</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="comfirFn">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss">
@import './common/scss/variable.scss';
$minHeihgt: 1000px;

.layout {
    width: 100%;
    min-width: 1200px;
    margin: 0 auto;

    .layout-header {
        width: 100%;
        background-color: $bgColor;
        padding: 20px 20px;

        .box {
            text-align: right;

            button {
                background-color: transparent;
                font-size: 16px;
                cursor: pointer;
            }

            .el-icon,
            span {
                vertical-align: middle;
            }

            .el-icon {
                margin-right: 5px;
            }
        }
    }

    main {
        width: 100%;

        aside {
            min-height: $minHeihgt;
            background-color: #f9f9f9;
            padding: 15px 20px;
        }

        section {
            min-height: $minHeihgt;
            background-color: #f0f0f0;
            padding: 15px 20px;
        }
    }
}
</style>


<script setup lang="ts">
// 导入ref函数
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import MyMenu from './components/MyMenu.vue'
import TopBar from './components/TopBar.vue'

import api from './api/http'

// 初始化首页
let token = localStorage.getItem("TOKEN")
let nickName = ref<any>("");
let isLogin = ref<boolean>(false);
let dialogVisible = ref<boolean>(false);
const $router = useRouter();
if (token) {
    isLogin.value = true;
    nickName.value = localStorage.getItem("NICK_NAME");
    // 判断用户登录状态（实参）
    api.logged({ token })
        .then(content => {
            // console.log('----->', content);
            let { code } = content;
            // 跳转登录页
            if (code != 200) {
                $router.push({ path: '/login' })
            }
        })
}

const logoutFn = () => {
    dialogVisible.value = true;
}
const comfirFn = () => {
    // 布尔值设置为false
    isLogin.value = false;
    // 移除token
    localStorage.removeItem("TOKEN");
    localStorage.removeItem("NICK_NAME");
    // 隐藏对话框
    dialogVisible = false
    // 延迟跳转登录页
    $router.replace({
        path: '/login'
    })
}

</script>